<template>
  <div>
    <div class="titleBackgroundColor title-border" :style="{ height:size120,lineHeight:size120 }">
      <div class="n-title-text" :style="{fontSize:size30}">问诊单</div>
    </div>
    <div class="ss-div-border" :style="{height: size50, lineHeight: size50, marginTop: size10,marginLeft: size20,marginRight: size20, fontSize: size25}" v-on:click="openSearch" >
        <div style="float:left;" :style="{marginLeft: size300}"><img :src="search"  :style="{width: size30, height: size30,marginTop: size10}" class="workCard-head-Image"></div>
        <div style="float:left;" :style="{marginLeft: size20}">搜索</div>
    </div>
    <mt-index-list ref="combo">
      <mt-index-section index="A">
      <mt-cell>
          <div slot="icon" :style="{height: size83}" >
            <div style="float:left;" :style="{marginTop: size20}">
              <img :src="head"  :style="{width: size62, height: size62}" class="workCard-head-Image" ></img>
              <div class="ss" :style="{ fontSize: size5 }">男&nbsp;38岁</div>
            </div>
            <div style="font-size:10px;float:left;" :style="{marginTop: size30,marginLeft: size20}">
                <div :style="{fontSize: size30}" style="font-weight: bold;">王兴光</div>
                <div :style="{marginTop: size15}">15606820820</div>
            </div>
          </div>
        </mt-cell>
      </mt-index-section>
      <mt-index-section index="B">
        <mt-cell>
          <div slot="icon" :style="{height: size83}" >
            <div style="float:left;" :style="{marginTop: size20}">
              <img :src="head"  :style="{width: size62, height: size62}" class="workCard-head-Image" ></img>
              <div class="ss" :style="{ fontSize: size5 }">男&nbsp;38岁</div>
            </div>
            <div style="font-size:10px;float:left;" :style="{marginTop: size30,marginLeft: size20}">
                <div :style="{fontSize: size30}" style="font-weight: bold;">王兴光</div>
                <div :style="{marginTop: size15}">15606820820</div>
            </div>
          </div>
        </mt-cell>
        <mt-cell>
          <div slot="icon" :style="{height: size83}" >
            <div style="float:left;" :style="{marginTop: size20}">
              <img :src="head"  :style="{width: size62, height: size62}" class="workCard-head-Image" ></img>
              <div class="ss" :style="{ fontSize: size5 }">男&nbsp;38岁</div>
            </div>
            <div style="font-size:10px;float:left;" :style="{marginTop: size30,marginLeft: size20}">
                <div :style="{fontSize: size30}" style="font-weight: bold;">王兴光</div>
                <div :style="{marginTop: size15}">15606820820</div>
            </div>
          </div>
        </mt-cell>
      </mt-index-section>
      <mt-index-section index="C">
       <mt-cell>
          <div slot="icon" :style="{height: size83}" >
            <div style="float:left;" :style="{marginTop: size20}">
              <img :src="head"  :style="{width: size62, height: size62}" class="workCard-head-Image" ></img>
              <div class="ss" :style="{ fontSize: size5 }">男&nbsp;38岁</div>
            </div>
            <div style="font-size:10px;float:left;" :style="{marginTop: size30,marginLeft: size20}">
                <div :style="{fontSize: size30}" style="font-weight: bold;">王兴光</div>
                <div :style="{marginTop: size15}">15606820820</div>
            </div>
          </div>
        </mt-cell>
      </mt-index-section>
      <mt-index-section index="D">
      </mt-index-section>
      <mt-index-section index="E">
        <mt-cell>
          <div slot="icon" :style="{height: size83}" >
            <div style="float:left;" :style="{marginTop: size20}">
              <img :src="head"  :style="{width: size62, height: size62}" class="workCard-head-Image" ></img>
              <div class="ss" :style="{ fontSize: size5 }">男&nbsp;38岁</div>
            </div>
            <div style="font-size:10px;float:left;" :style="{marginTop: size30,marginLeft: size20}">
                <div :style="{fontSize: size30}" style="font-weight: bold;">王兴光</div>
                <div :style="{marginTop: size15}">15606820820</div>
            </div>
          </div>
        </mt-cell>
        <mt-cell>
          <div slot="icon" :style="{height: size83}" >
            <div style="float:left;" :style="{marginTop: size20}">
              <img :src="head"  :style="{width: size62, height: size62}" class="workCard-head-Image" ></img>
              <div class="ss" :style="{ fontSize: size5 }">男&nbsp;38岁</div>
            </div>
            <div style="font-size:10px;float:left;" :style="{marginTop: size30,marginLeft: size20}">
                <div :style="{fontSize: size30}" style="font-weight: bold;">王兴光</div>
                <div :style="{marginTop: size15}">15606820820</div>
            </div>
          </div>
        </mt-cell>
      </mt-index-section>
      <mt-index-section index="F">
      </mt-index-section>
      <mt-index-section index="G">
      </mt-index-section>
      <mt-index-section index="H">
      </mt-index-section>
      <mt-index-section index="Z">
      </mt-index-section>
    </mt-index-list> 
  </div>
</template>
<script>
import { IndexList, IndexSection, Search } from 'mint-ui'

export default {
  components: {
    Search: Search.name,
    IndexList: IndexList.name,
    IndexSection: IndexSection.name
  },
  data () {
    return {
      head: '../../../static/head.jpg',
      search: '../../../static/search.png',
      name: '',
      DemoList: [
          { name: 'A1', sex: '男', first: 'A' },
          { name: 'B2', sex: '男', first: 'B' },
          { name: 'C3', sex: '女', first: 'c' },
          { name: 'D1', sex: '女', first: 'D' },
          { name: 'E1', sex: '男', first: 'E' }
      ]
    }
  },
  mounted () {
    this.getIndex()
  },
  computed: {
    size5 () {
      return this.clientWidth * 5 / 750 + 'px'
    },
    size10 () {
      return this.clientWidth * 10 / 750 + 'px'
    },
    size15 () {
      return this.clientWidth * 15 / 750 + 'px'
    },
    size20 () {
      return this.clientWidth * 20 / 750 + 'px'
    },
    size25 () {
      return this.clientWidth * 25 / 750 + 'px'
    },
    size30 () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    size62 () {
      return this.clientWidth * 62.5 / 750 + 'px'
    },
    size83 () {
      return this.clientWidth * 83.3 / 750 + 'px'
    },
    size50 () {
      return this.clientWidth * 50 / 750 + 'px'
    },
    size120 () {
      return this.clientWidth * 120 / 750 + 'px'
    },
    size300 () {
      return this.clientWidth * 300 / 750 + 'px'
    },
    size320 () {
      return this.clientWidth * 320 / 750 + 'px'
    }
  },
  methods: {
    getIndex () {
      this.$nextTick(() => {
        for (var i = 0; i < 24; i++) {
          var index = this.$refs.combo.$children[i].$el.querySelectorAll('.mint-indexsection-index')[0].innerHTML
          console.log(this.$refs.combo.$children[i].$el)
          console.log(index)
          for (var item in this.DemoList) {
            if (this.DemoList[item].first === index) {

            }
          }
        }
      })
    },
    openSearch () {
      var router = this.$router
      router.push({path: '/search'})
    }
  }
}
</script>

<style>
.workCard-head-Image {
    border-radius:50%;
  }
.ss{
    text-align: center;
    border: solid 1px #FF9900;
    -webkit-border-radius: 30%;
}
.mint-cell-text {
    margin-left: 20px;
    vertical-align: middle;
}
.ss-div-border {
  background-color: #ffffff;
  text-align: center;
  color: #5b6175;
}
</style>
